<template>
  <Dialog title="配送订单详情" v-model="dialogVisible" width="1200px">
    <el-scrollbar max-height="70vh" v-loading="formLoading">
      <!-- 订单基本信息 -->
      <el-descriptions title="订单基本信息" :column="3" border class="mb-20px">
        <el-descriptions-item label="配送订单号" :span="1">
          <span class="font-bold">{{ formData.orderNo }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="订单状态" :span="1">
          <dict-tag :type="DICT_TYPE.DELIVERY_ORDER_STATUS" :value="formData.status" />
        </el-descriptions-item>
        <el-descriptions-item label="配送状态" :span="1">
          <dict-tag :type="DICT_TYPE.DELIVERY_STATUS" :value="formData.deliveryStatus" />
        </el-descriptions-item>
        <el-descriptions-item label="配送基地" :span="1">
          {{ formData.farmName }}
        </el-descriptions-item>
        <el-descriptions-item label="配送总价" :span="1">
          <span class="text-red-500 font-bold text-18px">¥{{ formData.totalPrice }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="预警状态" :span="1">
          <el-tag :type="formData.alertStatus ? 'danger' : 'success'">
            {{ formData.alertStatus ? '已预警' : '正常' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="1">
          {{ formData.createTime ? formatDate(formData.createTime) : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="预计到货时间" :span="1">
          {{ formData.estimatedArrivalTime ? formatDate(formData.estimatedArrivalTime) : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="预警时间" :span="1">
          {{ formData.alertTime ? formatDate(formData.alertTime) : '-' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 物流信息 -->
      <el-descriptions title="物流信息" :column="3" border class="mb-20px">
        <el-descriptions-item label="车牌号" :span="1">
          {{ formData.vehiclePlate || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="物流公司" :span="1">
          {{ formData.logisticsCompany || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="物流单号" :span="1">
          {{ formData.logisticsNo || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="实际出发时间" :span="1">
          {{ formData.actualDepartureTime ? formatDate(formData.actualDepartureTime) : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="实际到达时间" :span="2">
          {{ formData.actualArrivalTime ? formatDate(formData.actualArrivalTime) : '-' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 配送明细 -->
      <div class="mb-20px">
        <div class="text-16px font-bold mb-10px">配送明细</div>
        <el-table :data="formData.items" border stripe>
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column label="配送基地" prop="baseName" align="center" min-width="150" />
          <el-table-column label="配送商品" prop="productName" align="center" min-width="180" />
          <el-table-column label="单价" prop="unitPrice" align="center" width="100">
            <template #default="{ row }"> ¥{{ row.unitPrice }} </template>
          </el-table-column>
          <el-table-column label="配送数量" prop="quantity" align="center" width="100" />
          <el-table-column label="小计金额" prop="totalPrice" align="center" width="120">
            <template #default="{ row }">
              <span class="text-red-500 font-bold">¥{{ row.totalPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="质量备注" prop="qualityRemark" align="center" min-width="150">
            <template #default="{ row }">
              {{ row.qualityRemark || '-' }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 备注信息 -->
      <el-descriptions title="备注信息" :column="1" border class="mb-20px">
        <el-descriptions-item label="备注">
          {{ formData.remark || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-scrollbar>

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { OrderApi, OrderVO } from '@/api/mall/trade/deliveryOrder'
import { InfoApi } from '@/api/farm/info'
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'

/** 配送订单详情弹框 */
defineOptions({ name: 'DeliveryOrderDetail' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formData = ref<Partial<OrderVO>>({
  items: []
})

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  resetForm()
  // 查询订单详情
  try {
    formLoading.value = true
    const data = await OrderApi.getOrder(id)

    // 如果后端没有返回农场名称，根据farmId查询农场信息来填充
    if (!data.farmName && data.farmId) {
      try {
        const farmList = await InfoApi.getSimpleFarmList()
        const farm = farmList.find((f) => f.id === data.farmId)
        if (farm) {
          data.farmName = farm.farmName
        }
      } catch (error) {
        console.error('查询农场信息失败:', error)
      }
    }

    formData.value = data
  } catch (error) {
    message.error('获取订单详情失败')
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    items: []
  }
}

defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>

<style scoped lang="scss">
:deep(.el-descriptions__label) {
  width: 150px;
  font-weight: 500;
}
</style>
